<template>
  <div class="todolist">
    <select v-model="option">
      <option value>--请选择事件类型--</option>
      <option v-for="(item,index) in optionList" :key="index">{{ item }}</option>
    </select>
    <input type="text" v-model="inputValue" />
    <button @click="add">增加事件</button>
    <ul v-if="option=='所有事件'">
      <li v-for="(list,index) of showList" :key="index">
        <span class="status" :class="[list.status ? 'ready': 'todo']">{{list.status ? "完成" : "待完成"}}</span>
        <span v-if="list.status==false" class="spanwith">{{list.eventVal}}</span>
        <span v-else class="deleteline spanwith">{{list.eventVal}}</span>
        <!-- 这里的完成事件和删除事件我都传入了数组的id，而不是遍历的下标index -->
        <button @click="del(list.id)">删除</button>
      </li>
    </ul>
    <ul v-if="option=='未完成事件'">
      <li v-for="(list,index) of showList" :key="index">
        <!-- <div v-if="!list.status"> -->
          <span
            class="status"
            :class="[list.status ? 'ready': 'todo']"
          >{{list.status ? "完成" : "待完成"}}</span>
          <span class="spanwith">{{list.eventVal}}</span>
          <!-- 这里的完成事件和删除事件我都传入了数组的id，而不是遍历的下标index -->
          <button @click="complete(list.id)">完成</button>
          <button @click="del(list.id)">删除</button>
        <!-- </div> -->
      </li>
    </ul>
    <ul v-if="option=='完成事件'">
      <li v-for="(list,index) of showList" :key="index">
        <!-- <div v-if="list.status"> -->
          <span
            class="status"
            :class="[list.status ? 'ready': 'todo']"
          >{{list.status ? "完成" : "待完成"}}</span>
          <span class="deleteline spanwith">{{list.eventVal}}</span>
          <button @click="uncomplete(list.id)">未完成</button>
          <button @click="del(list.id)">删除</button>
        <!-- </div> -->
      </li>
    </ul>
    <div class="tips">{{tipMessage}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: "",
      lists: [
        { id: 1, eventVal: "未完成事件1", status: false },
        { id: 2, eventVal: "未完成事件2", status: false },
        { id: 3, eventVal: "未完成事件3", status: false },
        { id: 4, eventVal: "完成事件1", status: true },
        { id: 5, eventVal: "完成事件2", status: true },
        { id: 6, eventVal: "完成事件3", status: true }
      ],
      option: "", //保存下拉列表的名字
      optionList: ["所有事件", "未完成事件", "完成事件"],
      listsId: 0, //lists中的id，在add方法中添加数组对象的时候递增添加进数组
      tipMessage: "",
    //   finishList:[],
    //   todoList:[],
      showList:[]
    };
  },
  watch:{
      option: function(newVal,oldVal){
          if(newVal == "未完成事件"){
              this.showList = this.lists.filter(el => el.status === false);
          }else if(newVal == "完成事件"){
              this.showList = this.lists.filter(el => el.status === true);
          }else{
              this.showList = this.lists.concat([]);
          }
      }
  },
  methods: {
    add() {
      this.listsId++;
      if (this.inputValue != "") {
        //判断输入的值是否为空
        var str = {
          id: this.listsId,
          eventVal: this.inputValue,
          status: false
        }; //要加进数组的对象
        this.lists.push(str); //点击按钮，将input中的值存储到数组list中;
        this.inputValue = ""; //添加后input内容为空，方便再次添加事件
        if(this.option == "未完成事件"){
          this.showList = this.lists.filter(el => el.status === false);
        }
      } else {
        // alert('请输入正确的事件名')
        this.tipMessage = "请输入要添加的事件名称";
      }
    },
    //将事件改为完成事件
    complete(val) {
      this.lists.forEach(element => {
        if (element.id == val) element.status = true; //将数组中对象的未完成状态改为已完成
      });
      if(this.option == "未完成事件"){
          this.showList = this.lists.filter(el => el.status === false);
      }
    },
    //将事件改为未完成事件
    uncomplete(val) {
      this.lists.forEach(element => {
        if (element.id == val) element.status = false; //将数组中对象的未完成状态改为未完成
      });
      if(this.option == "完成事件"){
          this.showList = this.lists.filter(el => el.status === true);
      }
      
    },
    //删除方法
    del(val) {
      var subscript; //定义一个数组下标
      //首先查找指定的元素在数组中的位置，即id,返回该数组对象的下标
      this.lists.forEach(function(value, index) {
        if (value.id == val) return (subscript = index);
      });
      //删除数组中该下标对象
      this.lists.splice(subscript, 1);
      let subscript1
      this.showList.forEach(function(value, index) {
        if (value.id == val) return (subscript1 = index);
      });
      this.showList.splice(subscript1, 1);

    }
  }
};
</script>
<style>
.todolist {
  margin: 0 auto;
  width: 500px;
}

.todolist li {
  text-align: left;
  height: 30px;
  line-height: 30px;
}
.todolist li span {
  height: 30px;
  line-height: 30px;
}
.deleteline {
  /* 删除线的样式 */
  text-decoration: line-through;
}
select {
  height: 25px;
  line-height: 25px;
  vertical-align: top;
}
input {
  height: 19px;
  line-height: 19px;
}
button {
  height: 26px;
  line-height: 26px;
  vertical-align: top;
}
.spanwith {
  display: inline-block;
  width: 150px;
}
.status {
  padding-left: 25px;
  display: inline-block;
  width: 50px;
}
.todo {
  /* width: 25px; */
  height: 20px;
  background: url(../assets/todo.png) no-repeat;
}
.ready {
  /* width: 20px; */
  height: 20px;
  background: url(../assets/ready.png) no-repeat;
}
</style>